<template>
  <div class="create-project">
    <mu-dialog
      :open.sync="openSimple"
      dialog-class="dialog-project-info"
      width="517.5"
      :overlay-close="false"
      :overlay-opacity="0.9"
      overlay-color="#1F2433"
      transition="scale"
    >
      <div class="project-info-head">
        <strong class="title">
          新建课程
        </strong>
        <div class="fork">
          <img
            src="https://image.xuexiwangzhe.com/Frs7X7n1cwtAvkcc0Tu3A1Ao_FkG"
            @click="changeSimpleDialog"
          />
        </div>
      </div>
      <mu-form :model="createPro">
        <mu-form-item>
          <strong class="name">
            名称：
          </strong>
          <input
            class="project-info-name"
            v-model="createPro.title"
            placeholder="课程名称"
            placeholder-style="color: red"
          />
        </mu-form-item>
        <mu-form-item>
          <strong class="name">
            权限：
          </strong>
          <div class="project-info-root">
            <mu-menu
              placement="bottom-start"
              popover-class="root-menu"
              :open.sync="openRoot"
            >
              {{ createPro.root === 1 ? "私密" : "公开" }}
              <img
                class="more"
                src="https://image.xuexiwangzhe.com/Fh_z4GpzhoTs57xSgVpmqTgKTNqk"
              />
              <div slot="content" class="root-list">
                <div
                  class="root-item"
                  :class="{ 'root-item-active': createPro.root === 1 }"
                  @click="
                    createPro.root = 1;
                    openRoot = false;
                  "
                >
                  <div class="root-item-head">
                    <img
                      src="https://image.xuexiwangzhe.com/FnG3jC29AL-rJrPBLm5q1PCvX9MH"
                    />
                    私密
                  </div>
                  <div class="root-item-intro">仅项目内成员可见</div>
                </div>
                <div
                  class="root-item"
                  :class="{ 'root-item-active': createPro.root === 0 }"
                  @click="
                    createPro.root = 0;
                    openRoot = false;
                  "
                >
                  <div class="root-item-head">
                    <img
                      src="https://image.xuexiwangzhe.com/Flbn_9Z91HNhWd2e9wIcW9OENo7u"
                    />
                    公开
                  </div>
                  <div class="root-item-intro">团队内的所有成员都可见</div>
                </div>
              </div>
            </mu-menu>
          </div>
        </mu-form-item>
        <mu-form-item>
          <strong class="name" style="position: relative;right: 13px;">
            主题色：
          </strong>
          <div class="color-list">
            <div class="color-item" v-for="(item, index) in color" :key="index">
              <div
                class="color-doc"
                :style="{ background: item }"
                @click="createPro.colorIndex = index"
              >
                <img
                  class="color-active"
                  v-if="createPro.colorIndex === index"
                  src="https://image.xuexiwangzhe.com/FtQTH8aa3NRrCGluvu_j5fvoIKVV"
                />
              </div>
            </div>
          </div>
        </mu-form-item>
        <mu-form-item>
          <strong class="name">
            时间：
          </strong>
          <div class="date">
            <div class="start-time date-time">
              <mu-date-input
                v-model="createPro.startTime"
                @change="changeStartTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                :max-date="maxEndDate"
                type="dateTime"
                clock-type="24hr"
                view-type="list"
                full-width
                landscape
                solo
              ></mu-date-input>
              <div class="date-tips">
                <img
                  src="https://image.xuexiwangzhe.com/FqJ5djC8gVNgpT0P7555DOI1Y-0p"
                />
                <span v-if="!createPro.startTime">开始时间</span>
              </div>
            </div>
            <div class="date-to">
              -
            </div>
            <div class="end-time date-time">
              <mu-date-input
                v-model="createPro.endTime"
                @change="changeEndTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                :min-date="minStartDate"
                type="dateTime"
                clock-type="24hr"
                view-type="list"
                full-width
                landscape
                solo
              ></mu-date-input>
              <div class="date-tips">
                <img
                  src="https://image.xuexiwangzhe.com/FmeB9k1IJGquh3fPE_TYpJn71905"
                />
                <span v-if="!createPro.endTime">结束时间</span>
              </div>
            </div>
          </div>
        </mu-form-item>
      </mu-form>
      <div class="create-project-footer">
        <mu-button
          class="create-project-cancel"
          color="#ffffff"
          round
          @click="openSimple = false"
        >
          取消
        </mu-button>
        <mu-button
          class="create-project-botton"
          color="#265CFF"
          :disabled="!nextStep"
          round
          @click="next"
        >
          下一步
        </mu-button>
      </div>
    </mu-dialog>

    <mu-dialog
      :open.sync="openType"
      dialog-class="dialog-project-type"
      width="705"
      :overlay-close="false"
      :overlay-opacity="0.9"
      overlay-color="#1F2433"
      transition="scale"
    >
      <div class="project-type-head">
        <div class="back">
          <img
            src="https://image.xuexiwangzhe.com/FkNOutzKjCfTafy_J4W0OnbS6QFb"
            @click="changeTypeDialog"
          />
        </div>
        <div class="fork">
          <img
            src="https://image.xuexiwangzhe.com/Frs7X7n1cwtAvkcc0Tu3A1Ao_FkG"
            @click="openType = false"
          />
        </div>
      </div>
      <div class="project-type-title">
        想要创建哪种类型的课程？
      </div>
      <div class="project-type-select">
        <div
          class="project-type-option"
          :class="{ active: createPro.select === 2 }"
          @click="createPro.select = 2"
        >
          <img
            v-if="createPro.select === 2"
            class="cover"
            src="https://image.xuexiwangzhe.com/Fo5YxL9qTyQ-ln3YxQFTEGjKPoQd"
          />
          <img
            v-else
            class="cover"
            src="https://image.xuexiwangzhe.com/FopY4-GVBhJnjOo4RL6-C6OaoBTt"
          />
          <div class="title">面授课程</div>
          <div class="intro">
            您将自定义课程的开始结束时间，学员按照指定时间上课
          </div>
        </div>
        <div
          class="project-type-option"
          :class="{ active: createPro.select === 1 }"
          @click="createPro.select = 1"
        >
          <img
            v-if="createPro.select === 1"
            class="cover"
            src="https://image.xuexiwangzhe.com/Fl4GrXDTh5Vrjdq3OA2WbJffOj6H"
          />
          <img
            v-else
            class="cover"
            src="http://image.xuexiwangzhe.com/Fmfhe28PztoYPesk3phCjmQGto5M"
          />
          <div class="title">打卡课程</div>
          <div class="intro">
            您每天只能设置1个课程主题，学员需要连续打卡21天
          </div>
        </div>
        <div
          class="project-type-option"
          :class="{ active: createPro.select === 3 }"
          @click="createPro.select = 3"
        >
          <img
            v-if="createPro.select === 3"
            class="cover"
            src="https://image.xuexiwangzhe.com/Ft935z46SZRn17S8NOYA1tlRG4Fj"
          />
          <img
            v-else
            class="cover"
            src="https://image.xuexiwangzhe.com/Fr0OmNOCT0HpRpcysiNqOuR9CzjD"
          />
          <div class="title">通关课程</div>
          <div class="intro">
            您无需设置课程时间，学员完成第一关后才能解锁下一关
          </div>
        </div>
      </div>
      <div class="create-project-footer">
        <mu-button
          class="create-project-cancel"
          color="#ffffff"
          round
          @click="changeTypeDialog"
        >
          上一步
        </mu-button>
        <mu-button
          class="create-project-botton"
          color="#265CFF"
          :disabled="!confirm"
          round
          @click="create"
        >
          确定
        </mu-button>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openSimple: false, // 弹框基本信息
      openType: false, // 弹框类型
      createPro: {
        // 表单数据
        title: "",
        root: 0,
        colorIndex: 0,
        startTime: "",
        endTime: "",
        select: -1,
      },
      openRoot: false, // 权限控制
      a: new Date("2021-03-16"),
      b: new Date("2021-03-24"),
    };
  },
  computed: {
    nextStep() {
      return !!(
        this.createPro.title &&
        this.createPro.startTime &&
        this.createPro.endTime
      );
    },
    confirm() {
      return this.nextStep && this.createPro.select !== -1;
    },
    color() {
      return this.globalData.color;
    },
    // 最小开始时间
    minStartDate() {
      const nowDate = new Date(),
            nowMonth = nowDate.getMonth(),
            nowYear = nowDate.getFullYear(),
            nowDay = nowDate.getDay();
      if(this.createPro.startTime) {
        // let m = parseInt(this.createPro.startTime.substr(5, 2)) - 1;
        // let time = this.createPro.startTime.replace(/\-[0-9]{2}/, "-" + (m < 10 ? "0" + m : m));
        return new Date(this.createPro.startTime);
      };
      let minDate = nowYear - 100 + '-' + (nowMonth + 1) + '-' + nowDay;
      return new Date(minDate);
    },
    // 最大结束时间
    maxEndDate() {
      const nowDate = new Date(),
            nowMonth = nowDate.getMonth(),
            nowYear = nowDate.getFullYear(),
            nowDay = nowDate.getDay();
      if(this.createPro.endTime) {
        // let m = parseInt(this.createPro.endTime.substr(5, 2)) - 1;
        // let time = this.createPro.endTime.replace(/\-[0-9]{2}/, "-" + (m < 10 ? "0" + m : m));
        return new Date(this.createPro.endTime)
      };
      let maxDate = nowYear + 100 + '-' + (nowMonth + 1) + '-' + nowDay;
      return new Date(maxDate);
    },
  },
  methods: {
    // 控制弹框显示隐藏
    changeSimpleDialog() {
      this.openSimple = !this.openSimple;
    },
    // 下一步
    next() {
      if (this.nextStep) {
        this.changeTypeDialog();
      }
    },
    // 控制类型显示隐藏
    changeTypeDialog() {
      this.openType = !this.openType;
      this.changeSimpleDialog();
    },
    initData() {
      this.createPro = {
        title: "",
        root: 0,
        colorIndex: 0,
        startTime: "",
        endTime: "",
        select: -1,
      };
    },
    // 提交
    create() {
      const params = {
        title: this.createPro.title,
        openState: this.createPro.root,
        color: this.color[this.createPro.colorIndex],
        type: this.createPro.select,
        startTime: this.createPro.startTime,
        endTime: this.createPro.endTime,
      };

      this.$axios.post("/project/create", params).then((res) => {
        if (res.success) {
          this.openType = false;
          this.initData();
          this.$emit("create-project", params);
        }
      });
    },
    // 开始结束时间被改变后，监控是否超出边界值
    changeStartTime(value) {
      if(new Date(value).getTime() > new Date(this.createPro.endTime).getTime()) {
        this.createPro.endTime = value;
      }
    },
    changeEndTime(value) {
      if(new Date(value).getTime() < new Date(this.createPro.startTime).getTime()) {
        this.createPro.startTime = value;
      }
    },
  },
};
</script>

<style lang="less">
.dialog-project-info {
  border-radius: 14px !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .mu-dialog-body {
    padding: 27px 30px 30px 30px;
    color: #333333;
  }

  .project-info-head {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 39px;
  }

  .fork img {
    width: 13.5px;
    height: 13.5px;
    cursor: pointer;
  }

  .mu-form {
    padding: 0 29px;
  }
  .mu-form-item {
    color: #333333;
  }

  .project-info-name {
    width: 345px;
    height: 33px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    outline: none;
    padding-left: 15px;
    margin-left: 12px;
  }
  .project-info-name::-webkit-input-placeholder {
    color: #ccc;
    font-size: 12px;
  }
  .project-info-name:-moz-placeholder {
    color: #ccc;
    font-size: 12px;
  }
  .project-info-name:-ms-input-placeholder {
    color: #ccc;
    font-size: 12px;
  }

  .color-list {
    display: flex;
    background: red;
  }
  .color-item {
    position: relative;
    width: 42px;
    text-align: center;
  }
  .color-doc {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 27px;
    text-align: center;
    vertical-align: bottom;
  }
  .color-active {
    width: 15px;
    height: 15px;
    vertical-align: middle;
  }

  .date {
    display: flex;
    .date-to {
      width: 24px;
      text-align: center;
      line-height: 30px;
      position: relative;
      left: 10px;
      color: #999999;
    }
    .date-time {
      position: relative;
    }
    .date-tips {
      position: absolute;
      left: 22px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: #999;
      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
        position: relative;
        top: 2px;
      }
    }
  }
  .date .mu-input {
    margin-left: 12px;
    height: 30px;
    border: 1px solid #cccccc;
    border-radius: 15px;
    position: relative;
    z-index: 1;
    i {
      left: 3px;
      top: 50%;
      transform: translateY(-50%) scale(0.7);
    }
    input {
      font-size: 14px;
      padding-left: 30px;
      padding-top: 2px;
      width: 148px;
      min-width: 128px;
      cursor: pointer;
    }
  }
}

// ======================权限选择弹框========================
.project-info-root {
  margin-left: 12px;
  cursor: pointer;
  .more {
    width: 12px;
    height: 12px;
    margin-left: 6px;
  }
}
.root-menu {
  border-radius: 9px !important;
  box-shadow: 0px 2px 3px 0px rgba(102, 102, 102, 0.2) !important;
}
.root-list {
  width: 171px;
  border-radius: 9px;
  cursor: pointer;
}
.root-item {
  padding: 9px 15px;
}
.root-item-active {
  background: #f0f0f0;
}
.root-item-head {
  img {
    width: 15px;
    height: 15px;
    position: relative;
    top: 2px;
  }
}
.root-item-intro {
  font-size: 12px;
  color: #999999;
  margin-top: 3px;
}

.create-project-footer {
  display: flex;
  justify-content: flex-end;
}
.create-project-botton {
  width: 120px;
  height: 30px !important;
  box-shadow: none !important;
  margin-left: 21px !important;
}
.create-project-cancel {
  color: #666666 !important;
  border: 1px solid #666666 !important;
  width: 120px;
  height: 30px !important;
  box-shadow: none !important;
}

// ========================选择类型=============================
.dialog-project-type {
  border-radius: 14px !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .mu-dialog-body {
    padding: 27px 30px 30px 30px;
    color: #333333;
  }

  .project-type-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    .back img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .fork img {
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
  }

  .project-type-title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 41px;
  }

  .project-type-select {
    text-align: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 38px;
    .project-type-option.active {
      color: #265cff;
      border: 1px solid #265cff;
    }
  }

  .project-type-option {
    width: 195px;
    height: 197px;
    border-radius: 15px;
    border: 1px solid #e6e6e6;
    cursor: pointer;

    .cover {
      width: 77px;
      height: 77px;
      margin-top: 24px;
      vertical-align: bottom;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
      margin-top: 15px;
    }
    .intro {
      font-size: 12px;
      margin-top: 9px;
      padding: 0 18px;
    }
  }
}
</style>
